<template>
  <div>
    <h1>Son2子组件</h1>
    <span>从vuex中获取的值：{{ count }}</span>
    <br>
    <button @click="handleClick(-1)">值-1</button>
    <button @click="handleClick(-5)">值-5</button>
    <button @click="setAsyncCount(1121)">5秒后改为1121</button>
    <hr>
    <div>
      {{ filterList }}
    </div>
    <!-- 访问模块中的state -->
    <div>{{ `${userInfo.name}大人年龄${userInfo.age}歲，在这次年度魅魔测试中取得了${score}昏！` }}</div>
    <div>{{ theme }}</div>
    <!-- 访问模块中的getters -->
    <div>{{ UpperCaseName }}</div>
     <!-- 访问模块中的mutations -->
     <button @click="changeUserName('KoubeShio')">修改名字</button>
      <!-- 访问模块中的actions -->
    <button @click="changeAsyncName('I Love KoubeShio')">1秒后修改名字</button>
  </div>
</template>

<script>
import { mapState, mapActions, mapGetters, mapMutations } from 'vuex'
export default {
  name: 'SonComp2',
  methods: {
    handleClick (value) {
      this.$store.commit('addCount', value)
    },
    ...mapActions(['setAsyncCount']),
    ...mapMutations('user', ['changeUserName']),
    ...mapActions('user', ['changeAsyncName'])
  },
  computed: {
    ...mapGetters(['filterList']),
    ...mapState(['count']),
    ...mapState('user', ['userInfo', 'score']),
    ...mapState('setting', ['theme']),
    ...mapGetters('user', ['UpperCaseName'])
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
</style>
